@use "scss/variables";
@use "scss/colors";
@use "scss/z-indices";

.workspacesPicker__container {
  width: 100%;
}

.workspacesPicker__button {
  width: 100%;
  border: 0;
  color: colors.$dark-blue-900;
  background: colors.$foreground;
  padding: 0;

  &:focus-visible,
  &:hover {
    background: colors.$grey-50;
  }

  &:focus-visible {
    outline: 3px solid colors.$blue-50;
  }
}

.workspacesPicker__popoverPanel {
  position: relative;
  z-index: z-indices.$workspacePicker;
  width: 300px;
  background: colors.$foreground;
  border-radius: variables.$border-radius-lg;
  box-shadow: variables.$box-shadow-raised;
}

.workspacesPicker__buttonContent {
  padding: variables.$spacing-md variables.$spacing-sm variables.$spacing-md variables.$spacing-md;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.workspacesPicker__buttonText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
